<template>
  <!-- 热门推荐除了“全部”菜单项外，其他菜单项显示内容，定义了父子组件，此为子组件， 父组件为Common.vue -->
  <div class="free-hot-contrainer">
    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane
        v-for="(tabPane, tabPaneIndex) in tabPanes"
        :key="tabPaneIndex"
        :label="tabPane.label"
        :name="tabPane.name"
      >
        <el-row
          class="free-detail"
          v-for="(articleBrief, index) in articleBriefs"
          :key="index"
        >
          <el-col :lg="4"
            ><el-image
              @click="watchContent(articleTitle, articleBrief)"
              :src="
                require('@/assets/activity' +
                  (index + 1 < 6 ? index + 1 : 1) +
                  '.png')
              "
          /></el-col>
          <el-col :lg="20">
            <div>
              <span
                class="free-detail-title"
                @click="watchContent(articleTitle, articleBrief)"
                ><strong v-html="articleBrief.title"></strong
                ><el-avatar
                  :size="16"
                  :src="require('@/assets/charge.png')"
                  v-show="tabPane.name == 'charge'"
              /></span>
            </div>
            <div class="free-detail-info" id="free-detail-info">
              <el-avatar
                :size="24"
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
              />
              <span>{{ articleBrief.author }}</span>
              <span
                >&ensp;<i class="el-icon-view" />浏览&ensp;{{
                  articleBrief.glanceNum
                }}</span
              >
              <span
                >&ensp;<i class="el-icon-chat-dot-round" />评论&ensp;{{
                  articleBrief.commentNum
                }}</span
              >
              <span
                >&ensp;{{ articleBrief.issueTime }}</span
              >
              <span
                :ref="tabPane.name + '_' + index"
                @mouseleave="handlerMouseLeave(tabPane.name + '_' + index)"
                id="close-span"
                @click="handlerClick"
                ><span id="el-icon-close-span">不感兴趣&ensp;</span
                ><i
                  class="el-icon-close"
                  id="el-icon-close"
                  @mouseover="handlerMouseOver(tabPane.name + '_' + index)"
              /></span>
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  name: "Title",
  props: ["title"],

  data() {
    return {
      activeName: "free",
      tabPanes: [
        {
          label: "免费专区",
          name: "free",
        },
        {
          label: "精品专区",
          name: "charge",
        },
      ],
      articleBriefs: [],
      articleTitle: this.$route.name,
    };
  },
  created() {
    this.pagingQuery()
  },
  methods: {
    watchContent(articleTitle, articleBrief) {
      if (this.activeName == "free") {
        this.$router.push({
          path: "/articleContent",
          query: {
            author: articleBrief.author,
            issueTime: articleBrief.issueTime,
            title: articleBrief.title,
            commentNum: articleBrief.commentNum,
            glanceNum: articleBrief.glanceNum,
            collectNum: articleBrief.collectNum,
            id: articleBrief.id
          },
        });
      } else {
        this.$router.push({
          path: "/articleDetails",
          query: {
            id: articleBrief.id
          }
        });
      }
    },
    handlerMouseOver(ref) {
      this.$refs[ref][0].firstChild.style.display = "inline-block";
      this.$refs[ref][0].style.background = "rgb(11, 138, 223)";
      this.$refs[ref][0].style.color = "white";
      this.$refs[ref][0].style.borderRadius = "4px";
    },
    handlerMouseLeave(ref) {
      this.$refs[ref][0].firstChild.style.display = "none";
      this.$refs[ref][0].style.background = "";
      this.$refs[ref][0].style.color = "#909399";
    },
    handlerClick() {
      this.$message.warning("当前版本暂不支持此功能");
    },
    //分页查询
    pagingQuery() {
      //将HTML/CSS转化为HTML,防止地址栏出现问题
      if (this.articleTitle == "HTML/CSS")
        this.articleTitle = this.articleTitle.split("/")[0];

      //console.log(this.articleTitle);
      this.$http
        .get(
          `http://localhost:9999/article/article/pagingQuery/${this.articleTitle}`
        )
        .then((res) => {
          if (!res.data.code) {
            console.log(res.data.data);

            this.articleBriefs = [];
            for (var i = 0; i < res.data.data.length; ++i) {
              this.articleBriefs.push({
                title: res.data.data[i].title,
                //url: res.data.data[i].pic_url,
                author: res.data.data[i].person,
                //yyyy-MM-ddTHH:mm:ss 获取T之间的字符串
                issueTime: res.data.data[i].publish_time.split('T')[0],
                commentNum: 0,
                glanceNum: 0,
                collectNum: 0,
                id: res.data.data[i].id
              });
            }
            //console.log(this.articleBriefs)
          }
        });
    },
  },
  watch: {
    title: function () {
      this.activeName = "free";
    },
    $route(to, from) {
      this.articleTitle = to.name;
      this.pagingQuery()
    },
  },
};
</script>
<style>
#el-icon-close-span {
  display: none;
}
#el-icon-close {
  font-weight: bold;
}
#close-span {
  float: right;
  margin-right: 1%;
  cursor: pointer;
}
.free-detail .el-col:nth-child(2) div {
  margin-top: 2%;
}
.free-detail-info {
  margin-top: 3%;
  font-size: 14px;
  color: #909399;
}
.free-detail-info .el-avatar {
  vertical-align: bottom;
}
.free-detail-title {
  cursor: pointer;
  font-size: 24px;
}
.free-detail {
  margin-bottom: 1% !important;
  width: 90%;
  height: 100px;
  -webkit-box-shadow: 0px 3px 3px #c8c8c8;
  -moz-box-shadow: 0px 3px 3px #c8c8c8;
  box-shadow: 0px 3px 3px #c8c8c8;
}
.free-detail .el-image {
  vertical-align: middle;
  width: 90%;
  height: 100px;
}
.free-hot-contrainer {
  margin: 1% auto;
}
</style>